<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { searchDataJbfa } from "@/api/search";
import { addOrUpdateJbfa } from "@/api/addOrUpdate";

const editorRef = shallowRef();
const editorRef1 = shallowRef();
const editorRef2 = shallowRef();
const editorRef3 = shallowRef();
const editorRef4 = shallowRef();

const valueHtml = ref(
  "<p>组织指挥：成立由党、政、军共同组成的人民防空指挥部，统一组织指挥城市人民防空斗争，根据上级命令开设基本指挥所、预备指挥所和机动指挥所。<br/>主要职责：搜集、整理、分析判断情况，为指挥部首长提出人民防空行动决心建议；组织修改完善人民防空方案；拟制作战文书，传达命令、指示并督促检查执行情况；组织指挥所开设、转移和战备值班；组织人防专业队扩编、临战训练、抢险抢修和防护救援；组织重要目标防护；组织人民防空区域协同、城市管制；消除空袭后果；组织人员疏散隐蔽的交通运输、通信、治安、勤务、医疗和物资保障；协调人口跨区疏散并安置接收工作；组织气象水文等信息保障；指挥所辖防空指挥部行动；完成上级赋予的其他任务。<br/>指挥机构编组：指挥长、副指挥长和其他指挥部领导成员，指挥控制中心、情报信息部门、政治工作部门、综合保障部门。<br/></p>"
);
const valueHtml1 = ref(
  "<p>主要职责：XX。<br/>（1）综合计划和评估组<br/>主要职责：①.XX；②.XX；③.XX；④.XX。<br/>牵头单位：XX<br/>组成单位：XX、XX<br/>组        长：XX<br/>副  组  长：XX<br/>成        员：XX<br/>（2）人员防护指挥组<br/>主要职责：①.XX；②.XX；③.XX；④.XX。<br/>牵头单位：XX<br/>组成单位：XX、XX<br/>组        长：XX<br/>副  组  长：XX<br/>成        员：XX<br/>（3）重要目标防护指挥组<br/>主要职责：①.XX；②.XX；③.XX；④.XX。<br/>牵头单位：XX<br/>组成单位：XX、XX<br/>组        长：XX<br/>副  组  长：XX<br/>成        员：XX<br/>（4）跨区支援指挥组<br/>主要职责：①.XX；②.XX；③.XX；④.XX。<br/>牵头单位：XX<br/>组成单位：XX、XX<br/>组        长：XX<br/>副  组  长：XX<br/>成        员：XX<br/>（5）抢救抢修指挥组<br/>主要职责：①.XX；②.XX；③.XX；④.XX。<br/>牵头单位：XX<br/>组成单位：XX、XX<br/>组        长：XX<br/>副  组  长：XX<br/>成        员：XX<br/>①工程抢险抢修指挥小组<br/>牵头单位：XX<br/>组成单位：XX、XX<br/>组        长：XX<br/>副  组  长：XX<br/>成        员：XX<br/>②通信抢险抢修指挥小组<br/>牵头单位：XX<br/>组成单位：XX、XX<br/>组        长：XX<br/>副  组  长：XX<br/>成        员：XX<br/>③道桥抢险抢修指挥小组<br/>牵头单位：XX<br/>组成单位：XX、XX<br/>组        长：XX<br/>副  组  长：XX<br/>成        员：XX<br/>④供水抢险抢修指挥小组<br/>牵头单位：XX<br/>组成单位：XX、XX<br/>组        长：XX<br/>副  组  长：XX<br/>成        员：XX<br/>⑤电力抢险抢修指挥小组<br/>牵头单位：XX<br/>组成单位：XX、XX<br/>组        长：XX<br/>副  组  长：XX<br/>成        员：XX<br/>⑥燃气抢险抢修指挥小组<br/>牵头单位：XX<br/>组成单位：XX、XX<br/>组        长：XX<br/>副  组  长：XX<br/>成        员：XX<br/>⑦供热抢险抢修指挥小组<br/>牵头单位：XX<br/>组成单位：XX、XX<br/>组        长：XX<br/>副  组  长：XX<br/>成        员：XX<br/>⑧医疗救护指挥小组<br/>牵头单位：XX<br/>组成单位：XX、XX<br/>组        长：XX<br/>副  组  长：XX<br/>成        员：XX<br/>⑨消防救援指挥小组<br/>牵头单位：XX<br/>组成单位：XX、XX<br/>组        长：XX<br/>副  组  长：XX<br/>成        员：XX<br/>（6）临时指挥组<br/>主要职责：①.XX；②.XX；③.XX；④.XX。<br/>牵头单位：XX<br/>组成单位：XX、XX<br/>组        长：XX<br/>副  组  长：XX<br/>成        员：XX</p>"
);

const valueHtml2 = ref(
  "<p>主要职责：XX。<br/>编  组：XX。<br/>主  任：XX<br/>副主任：XX<br/>牵头单位：XX<br/>组成单位：XX<br/>（1）综合情报组<br/>主要职责：①.XX；②.XX；③.XX；④.XX。<br/>牵头单位：XX<br/>组成单位：XX、XX<br/>组        长：XX<br/>副  组  长：XX<br/>成        员：XX<br/>（2）警报通信组<br/>主要职责：①.XX；②.XX；③.XX；④.XX。<br/>牵头单位：XX<br/>组成单位：XX、XX<br/>组        长：XX<br/>副  组  长：XX<br/>成        员：XX<br/>（3）信息防护组<br/>主要职责：①.XX；②.XX；③.XX；④.XX。<br/>牵头单位：XX<br/>组成单位：XX、XX<br/>组        长：XX<br/>副  组  长：XX<br/>成        员：XX</p>"
);

const valueHtml3 = ref(
  "<p>主要职责：XX。<br/>编  组：XX。<br/>主  任：XX<br/>副主任：XX<br/>牵头单位：XX<br/>组成单位：XX<br/>（1）组织工作组<br/>主要职责：①.XX；②.XX；③.XX；④.XX。<br/>牵头单位：XX<br/>组成单位：XX、XX<br/>组        长：XX<br/>副  组  长：XX<br/>成        员：XX<br/>（2）纪检监察组<br/>主要职责：①.XX；②.XX；③.XX；④.XX。<br/>牵头单位：XX<br/>组成单位：XX、XX<br/>组        长：XX<br/>副  组  长：XX<br/>成        员：XX<br/>（3）宣传动员组<br/>主要职责：①.XX；②.XX；③.XX；④.XX。<br/>牵头单位：XX<br/>组成单位：XX、XX<br/>组        长：XX<br/>副  组  长：XX<br/>成        员：XX<br/>（4）群众工作组<br/>主要职责：①.XX；②.XX；③.XX；④.XX。<br/>牵头单位：XX<br/>组成单位：XX、XX<br/>组        长：XX<br/>副  组  长：XX<br/>成        员：XX<br/>（5）心理防护组<br/>主要职责：①.XX；②.XX；③.XX；④.XX。<br/>牵头单位：XX<br/>组成单位：XX、XX<br/>组        长：XX<br/>副  组  长：XX<br/>成        员：XX</p>"
);

const valueHtml4 = ref(
  "<p>主要职责：XX。<br/>编  组：XX。<br/>主  任：XX<br/>副主任：XX<br/>牵头单位：XX<br/>组成单位：XX<br/>（1）保障计划组<br/>主要职责：①.XX；②.XX；③.XX；④.XX。<br/>牵头单位：XX<br/>组成单位：XX、XX<br/>组        长：XX<br/>副  组  长：XX<br/>成        员：XX<br/>（2）工程保障组<br/>主要职责：①.XX；②.XX；③.XX；④.XX。<br/>牵头单位：XX<br/>组成单位：XX、XX<br/>组        长：XX<br/>副  组  长：XX<br/>成        员：XX<br/>（3）医疗救护和防化防疫保障组<br/>主要职责：①.XX；②.XX；③.XX；④.XX。<br/>牵头单位：XX<br/>组成单位：XX、XX<br/>组        长：XX<br/>副  组  长：XX<br/>成        员：XX<br/>（4）交通运输保障组<br/>主要职责：①.XX；②.XX；③.XX；④.XX。<br/>牵头单位：XX<br/>组成单位：XX、XX<br/>组        长：XX<br/>副  组  长：XX<br/>成        员：XX<br/>（5）后勤物资器材保障组<br/>主要职责：①.XX；②.XX；③.XX；④.XX。<br/>牵头单位：XX<br/>组成单位：XX、XX<br/>组        长：XX<br/>副  组  长：XX<br/>成        员：XX</p>"
);

const toolbarConfig = {};
const toolbarConfig1 = {};
const toolbarConfig2 = {};
const toolbarConfig3 = {};
const toolbarConfig4 = {};
const editorConfig = {
  placeholder: "请输入内容...",
};

const mode = ref("default");
const mode1 = ref("default");
const mode2 = ref("default");
const mode3 = ref("default");
const mode4 = ref("default");

// 加载html
const initHtml = () => {
  searchDataJbfa({ m: "指挥协同-指挥机构编成" }).then((res) => {
    if (res.code !== 200) return ElMessage.error(res.msg);
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "指挥机构编成职责")?.v || "";
 /*    valueHtml1.value = data.find((x) => x.k === "指挥控制中心")?.v || "";
    valueHtml2.value = data.find((x) => x.k === "情报信息部")?.v || "";
    valueHtml3.value = data.find((x) => x.k === "政治工作部")?.v || "";
    valueHtml4.value = data.find((x) => x.k === "综合保障部")?.v || ""; */
  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const handleCreated1 = (editor) => {
  editorRef1.value = editor; // 记录 editor 实例，重要！
};
const handleCreated2 = (editor) => {
  editorRef2.value = editor; // 记录 editor 实例，重要！
};
const handleCreated3 = (editor) => {
  editorRef3.value = editor; // 记录 editor 实例，重要！
};
const handleCreated4 = (editor) => {
  editorRef4.value = editor; // 记录 editor 实例，重要！
};

// 保存
const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateJbfa({
      m: "指挥协同-指挥机构编成",
      data: [
        {
          k: "指挥机构编成职责",
          v: valueHtml.value,
        },
      /*   {
          k: "指挥控制中心",
          v: valueHtml1.value,
        },
        {
          k: "情报信息部",
          v: valueHtml2.value,
        },
        {
          k: "政治工作部",
          v: valueHtml3.value,
        },
        {
          k: "综合保障部",
          v: valueHtml4.value,
        }, */
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(() => {
  initHtml();
});

onBeforeUnmount(() => {
  const editor = editorRef.value;
  const editor1 = editorRef1.value;
  const editor2 = editorRef2.value;
  const editor3 = editorRef3.value;
  const editor4 = editorRef4.value;
  if (!editor) return;
  if (!editor1) return;
  if (!editor2) return;
  if (!editor3) return;
  if (!editor4) return;
  editor.destroy();
  editor1.destroy();
  editor2.destroy();
  editor3.destroy();
  editor4.destroy();
});
</script>
<template>
  <div>
    <FirstTitle name="指挥机构编成、职责" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>

<!--     <FirstTitle name="指挥控制中心" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef1"
        :defaultConfig="toolbarConfig1"
        :mode="mode1"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml1"
        :defaultConfig="editorConfig"
        :mode="mode1"
        @onCreated="handleCreated1"
      />
    </div>

    <FirstTitle name="情报信息部" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef2"
        :defaultConfig="toolbarConfig2"
        :mode="mode2"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml2"
        :defaultConfig="editorConfig"
        :mode="mode2"
        @onCreated="handleCreated2"
      />
    </div>

    <FirstTitle name="政治工作部" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef3"
        :defaultConfig="toolbarConfig3"
        :mode="mode3"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml3"
        :defaultConfig="editorConfig"
        :mode="mode3"
        @onCreated="handleCreated3"
      />
    </div>

    <FirstTitle name="综合保障部" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef4"
        :defaultConfig="toolbarConfig4"
        :mode="mode4"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml4"
        :defaultConfig="editorConfig"
        :mode="mode4"
        @onCreated="handleCreated4"
      />
    </div>
 -->
    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss">
.zddj {
  font-size: 14px;
}
</style>